<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">角色名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" placeholder="" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">角色编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="code" placeholder="" class="layui-input">
                            </div>
                        </div>
						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="data-table-query-filter">
								<i class="layui-icon layui-icon-search"></i>查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="data-table" lay-filter="data-table-filter"></table>
			</div>
		</div>

        <script type="text/html" id="toolbarLeftTpl">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		        <i class="layui-icon layui-icon-add-1"></i>新增
		    </button>
		    <button class="pear-btn pear-btn-danger pear-btn-md layui-hide" lay-event="batchDelete">
		        <i class="layui-icon layui-icon-delete"></i>删除
		    </button>
		</script>
		<script type="text/html" id="operationTpl">
		{{#if (d.code != "role_admin") { }}
			<button class="pear-btn pear-btn-xs pear-btn-primary" lay-event="authorization" title="菜单权限"><i class="layui-icon layui-icon-auz"></i></button>
			<button class="pear-btn pear-btn-xs pear-btn-primary" lay-event="addUser" title="分配用户"><i class="layui-icon layui-icon-user"></i></button>
			<button class="pear-btn pear-btn-xs pear-btn-primary layui-hide" lay-event="detail" title="详情"><i class="layui-icon layui-icon-eye"></i></button>
			<button class="pear-btn pear-btn-xs pear-btn-primary" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>
			<button class="pear-btn pear-btn-xs pear-btn-danger" lay-event="delete" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
		{{# } }}
		</script>

		<script src="../../../component/layui/layui.js"></script>
		<script src="../../../component/pear/pear.js"></script>
		<script>
			layui.use(['table', 'form', 'jquery','layer', 'admin', 'dict'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let layer = layui.layer;
				let admin = layui.admin;
				let dict = layui.dict;

				let cols = [[
                    { type: 'checkbox', hide: true },
                    { field: 'id', title: 'ID', width: 200, hide: true },
                    { field: 'name', title: '角色名称', width: 160 },
                    { field: 'code', title: '角色编码', width: 200 },
                    { field: 'seq', title: '排序号', width: 80 },
                    { field: 'disabled', title: '状态', width: 120, event: 'disabled', templet: function(d) {
                        return dict.labelButton('vtl_disabled', d.disabled, true);
                    } },
                    { field: 'userCount', title: '用户人数', width: 90 },
                    { field: 'remark', title: '备注', hide: true },
                    { field: 'createByName', title: '创建者', width: 120, hide: false },
                    { field: 'createTime', title: '创建时间', width: 160, hide: false, templet: function (d) {
                        return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                    }},
                    { field: 'updateByName', title: '更新者', width: 120 },
                    { field: 'updateTime', title: '更新时间', width: 160, templet: function (d) {
                        return layui.util.toDateString(d.updateTime, "yyyy-MM-dd HH:mm:ss");
                    }},
                    { field: 'operation', title: '操作', width: 200, fixed: 'right', templet: '#operationTpl' }
                ]]


				table.render({
					elem: '#data-table',
					url: '/vtl-role/page',
					request: {
                        pageName: 'current',
                        limitName: 'size'
                    },
					parseData: function(res) {
                        return {
                            "code": 0,
                            "msg": 'SUCCESS',
                            "count": res.total,
                            "data": res.records
                        };
                    },
					page: true,
					cols: cols,
					skin: 'line',
					toolbar: '#toolbarLeftTpl',
					defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports']
				});

				table.on('toolbar(data-table-filter)', function(obj) {
					if (obj.event === 'add') {
						window.edit();
                    } else if (obj.event === 'batchDelete') {
                        window.batchDelete();
					} else if (obj.event === 'refresh') {
                        window.refresh(true);
                    }
				});

				table.on('tool(data-table-filter)', function(obj) {
				    let row = obj.data;
                    switch (obj.event) {
                        case 'detail':
                            window.detail(row.id);
                            break;
                        case 'edit':
                            window.edit(row.id);
                            break;
                        case 'delete':
                            window.delete(obj);
                            break;
                        case 'disabled':
                            window.setDisabledValue(obj);
                            break;
						case 'addUser':
                            window.addUser(row.id, '角色【' + row.name + '】用户');
                            break;
						case 'authorization':
                            window.authorization(row.id);
                            break;
                        default:
                            break;
                    }
				});

				form.on('submit(data-table-query-filter)', function(data) {
					window.refresh(data.field);
					return false;
				});

				window.refresh = function(field = {}, deep = false) {
				    $.vtl.tableReloadData('data-table', field, deep);
				}

				window.edit = function(id) {
				    let url = 'edit.html' + ($.vtl.isBlank(id) ? '' : ('?id=' + id));
				    $.vtl.openLayer(url, { title: '编辑' });
                }

				window.delete = function(obj) {
                    layer.confirm('确定删除？', { icon: 3, title: '提示' }, function(index) {
                        layer.close(index);
                        $.delete('/vtl-role/' + obj.data.id, function(result) {
                            if (result.code == 200) {
                                obj.del();
                            }
                        });
                    });
                }

				window.detail = function(id, title = '详情') {
					top.layui.admin.jump('vtl-role-' + id, title, 'views/vtl-role/detail.html?&id=' + id)
				}

				window.setDisabledValue = function(obj) {
					layer.confirm('确定切换【启用/停用】状态？', { icon: 3, title: '提示' }, function(index) {
                        layer.close(index);
                        $.post('/vtl-role/setDisabledValue/' + obj.data.id, { disabled: !obj.data.disabled }, function(result) {
                        	if (result.code == 200) {
                               window.refresh(true);
                            }
                        });
                    });
                }

				window.addUser = function(id, title = '角色分配用户') {
					top.layui.admin.jump('vtl-role-add-user-' + id, title, 'views/system/role/roleUserList.html?roleId=' + id)
				}

				window.authorization = function(id) {
					let _this = this;
                    let success = function(layero, index, that) {
                        // 得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        // var iframeWin = window[layero.find('iframe')[0]['name']];
                        // iframeWin.init($('#userAvatar').attr('src'));
                    };
                    let yes = function(index, layero, that) {
                        // var $body = layui.layer.getChildFrame('body', index);
                        // var $sourceImage = layui.layer.getChildFrame('#sourceImage', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        let checkedMenuIdList = iframeWin.getCheckedIdList();
                        $.post('/vtl-role/setMenu/' + id, { menuIdList: checkedMenuIdList }, function(result) {
							if(result.code == 200) {
								layer.close(index);
							}
						});
                    };
                    $.vtl.openMenuSelector(success, yes, 'role', id);
				}

			})
		</script>
	</body>
</html>
